@import "base.less";

.swiper-slide {
  // background: #ffebd4;
}

.box {
  position: relative;
  opacity: 0;
  overflow: hidden;
}

.audio-box.play {
  animation-play-state: running;
}

.audio-box.play {
  -webkit-animation-play-state: running;
  animation-play-state: running;
}

.swiper-slide-active {
  .one {
    opacity: 1;

    .one-up {
      .ani(blurred-bottom,2s,4.5s);

      img {
        .ani(pulse,3s);
        .infinite() 
      }
    }

    @-webkit-keyframes skew-tl2 {
      0% {
        -webkit-transform: rotateY(-20deg) rotateX(35deg) translate(-300px, -300px) skew(35deg, -10deg);
        transform: rotateY(-20deg) rotateX(35deg) translate(-300px, -300px) skew(35deg, -10deg);
        opacity: 1;
      }
      99% {
        opacity: 1;
      }
      100% {
        -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
        transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
        opacity: 0;
      }
    }
    .t-l {
      .ani(skew-tl2,1s);
    }
    @-webkit-keyframes skew-br2 {
      0% {
        -webkit-transform: rotateY(-35deg) rotateX(-20deg) translate(250px, 250px) skew(12deg, 15deg);
        transform: rotateY(-35deg) rotateX(-20deg) translate(250px, 250px) skew(12deg, 15deg);
        opacity: 1;
      }
      99% {
        opacity: 1;
      }
      100% {
        -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
        transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
        opacity: 0;
      }
    }
    .t-r {
      .ani(skew-br2,1s)
    }
    @-webkit-keyframes bounce-bck2 {
      0% {
        -webkit-transform: scale(7);
        transform: scale(7);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
      }
    
      38% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1;
      }
    
      55% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
      }
    
      // 72% {
      //   -webkit-transform: scale(1);
      //   transform: scale(1);
      //   -webkit-animation-timing-function: ease-out;
      //   animation-timing-function: ease-out;
      // }
    
      // 81% {
      //   -webkit-transform: scale(1.24);
      //   transform: scale(1.24);
      //   -webkit-animation-timing-function: ease-in;
      //   animation-timing-function: ease-in;
      // }
    
      100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 0;
      }
    }

    .t1 {
      .ani(bounce-bck2,1s,0.5s)
    }
    .t2 {
      .ani(bounce-bck2,1s,1s)
    }
    .t3 {
      .ani(bounce-bck2,1s,1.5s)
    }

    .all {
      .ani(bounce-bck2,1s,2s)
    }
    .me {
      .ani(bounce-bck2,1s,2.5s)
    }
    .baby {
      .ani( rs-r2,0.8s,3s)
    }
    .to {
      .ani(roll-top2,1s,3.2s)
    }



    @keyframes bgShow {
      0% {
        transform: scale(1.5);
        opacity: 0;
      }
      100% {
        transform: scale(1);
        opacity: 1; 
      }
    }
    .one-bg,
    .bg-white {
      .ani(bgShow,1s,4.2s)
    }


    @keyframes showDon {
      0% {transform: scale(1);transform-origin: right bottom;}
      50% {transform: scale(1.2); transform-origin: right bottom;}
      100% {transform: scale(1); transform-origin: right bottom;}
    }
    .one-fb {
      .ani(bgShow,1s,4.2s);
      img {
        .ani(showDon,20s);
        .infinite()
      }

     }
     .one-ft {
      .ani(bgShow,1s,4.2s);
      img {
        .ani(peoAni,30s);
        .infinite()
      }
     }

     .flower1 {
      .ani(scale-center,1s,4.2s);

      img {
        .ani(rotate-center,8s);
        .infinite()
      }
     }
     .flower2 {
      .ani(scale-center,1s,4.2s);
      img {
        .ani(rotate-center,6s);
        .infinite()
      }
     }
    .one {
      background: #000;
    }

    .p1 {
      .ani(rs-sr,1.2s,4.6s)
    }
    .p2 {
      .ani(rs-r,1.2s,4.2s)
    }


    .one-icon {
      .ani(scale-bl,1.4s,4.4s);
    }
    .one-icon2 {
      .ani(scale-bl,1.2s,4.2s);
      img {
        .ani(showDon,16s);
        .infinite()
      }
    }

  } 


  @keyframes bgShowTwo {
    0% {transform: scale(1.5)}
    100% {transform: scale(1)}
  }
  .two {
    opacity: 1;
    .ani(bgShowTwo,1.5s);
   

    .two-tr {
      .ani(spaceInRight,1s);
      img {
        .ani(pulse,6s);
        .infinite();
      }
    }
    .two-tl {
      .ani(spaceInLeft,1.5s);
      img {
        .ani(pulse,4s);
        .infinite();
      }
    }

    .two-bot {
      .ani(scale-bottom,1.5s,0.5s)
    }

    .two-p3 {
      .ani(fadeInLeft,1.5s,1.5s)
    }
    .two-p4 {
      .ani(fadeInRight,1.5s,1.8s)
    }
    .two-p1 {
      .ani(fadeInUp,1.5s,2.8s)
    }
    .two-p2 {
      .ani(flipInY,2s,2.5s)
    }

    @keyframes bgShowFlower {
      0% {transform: scale(1.6) translateY(-8rem);opacity: 0;}
     
      100% {transform: scale(1) translateY(0);opacity: 1;}
    }

    .two-flower {
      .ani(bgShowFlower,3.5s,1.5s);
    }

    @keyframes Ticon1 {
      0% {
        transform: translate(-1rem,-1rem) rotate(45deg);
        opacity: 0;
      }
      3% {
        opacity: 1;
      }
      100% {
        transform: translate(10rem,8rem) rotate(0deg);
        opacity: 1;
      }
    }

    .icon1 {
      .ani(Ticon1,10s,1.5s);
      .infinite();
    }

    @keyframes Ticon2 {
      0% {
        transform: translate(-1rem, -2.5rem) rotate(180deg);
        opacity: 0;
      }
      3% {
        opacity: 1;
      }
      100% {
        transform: translate(1rem, 17.5rem) rotate(0deg);
        opacity: 1;
      }
    }

    .icon2 {
      .ani(Ticon2,10s,2s);
      .infinite();
    }

    @keyframes Ticon3{
      0% {
        transform: translate(-1rem, -1rem) rotate(180deg);
        opacity: 0;
      }
      3% {
        opacity: 1;
      }
      100% {
        transform:  translate(-8.8rem, 7rem) rotate(0deg);
        opacity: 1;
      }
    }
    .icon3 {
      .ani(Ticon3,10s,2.5s);
      .infinite();
    }

  }

  .three {
    opacity: 1;
    .ani(bgShowTwo,1s);

    .three-bg {
      .ani(rs-sr,2s,0.5s)
    }

    @-webkit-keyframes boingInUp2 {
      0% {
        opacity: 1;
        -webkit-transform-origin: 50% 0%;
        -webkit-transform: perspective(800px) rotateX(-20deg);
      }
    
      50% {
        opacity: 1;
        -webkit-transform-origin: 50% 0%;
        -webkit-transform:  perspective(800px) rotateX(20deg);
      }
    
      100% {
        opacity: 1;
        -webkit-transform-origin: 50% 0%;
        -webkit-transform:  perspective(800px) rotateX(-20deg);
      }
    }
    .three-top {
      .ani(boingInUp2,2s,0.5s);
      .infinite();
    }

    .three-bot {
      .ani(slide-bottom,1.5s,0.3s)
    }
    .three-p2 {
      .ani(bounceInLeft,1.3s,1s)
    }
    .three-p1 {
      .ani(bounceInRight,1.2s,1.3s)
    }
    .three-icon2 {
      .ani(scale-bottom,1.2s,1.6s)
    }

    .three-p3 {
      .peo-bottom {
        .ani(rs-sr,1s,2s)
      }
      .tp {
        .ani(flipInY,2s,2.4s)
      }
    }

    .three-p4 {
      .ani(boingInBottom,2s,2s);
      .three-pt {
        .ani(swing,10s);
        .infinite();
      }
    }
  }




  .four {
    opacity: 1;
    @keyframes bgShowFour {
      0% {transform: scale(1.8)}
      100% {transform: scale(1)}
    }
    .bg1 {
      .ani(bgShowFour,1.3s)
    }
    .bg3 {
      .ani(bgShowFour,1.3s,0.5s)
    }
    .bg2 {
      .ani(bgShowFour,1.3s,0.9s)
    }

    .icon1 {
      .ani(spaceInUp,2s,1s);
      @keyframes rotateImg {
        
        100% {
          transform: rotate(360deg);
        }
      }
      img {
        animation: spinner 10s linear infinite;
      }
    }

    .icon4 {
      .ani(scale-bl,1.5s,1.5s)
    }
    .icon2 {
      // .ani(bounce-bck,1.5s,1.5s)
      .ani(shake-show,1.5s,1.5s)
    }

    .p3 {
      .ani(fadeInLeft,1.5s,2.3s)
    }

    .p2 {
      .ani(scale-bottom,1.5s,2s)
    }
    .p4 {
      .ani(perDown,1.5s,2.6s)
    }

    .p1 {
      .ani(fadeInDown,1.6s,3s)
    }

    .icon5 {
      .ani(roll-left,2s,2.5s);
      img {
        .ani(vibrate-show,2s,2.5s);
          .infinite();
      }
    }
    .love {
      .ani(roll-right,2s,3s);
      img {
        .ani(shake-bottom,5s,2.5s);
       .infinite();
      }
    }
    .icon3 {
      .ani(fly-t,6s,2s);
      img {
        .ani(peoAni,3s,2.5s);
       .infinite();
      }
    }

  }

  .six {
    opacity: 1;

    .six-r {
      .ani(skew-l,2s,0.6s)
    }
    .six-l {
      .ani(skew-r,3s)
    }

    .six-cen {
      .ani(rs-l,3s)
    }

    .six-p4 {
      .ani(scale-br,1.5s,2s);
      .king {
        .ani(swing,1.5s,2s);
        .infinite();
      }
    }
    .six-p1 {
      .ani(slide-bottom,1.2s,2.3s)
    }
    .six-p5 {
      .ani(rotateInDownRight,1.2s,2.5s)
    }
    .six-p3 {
      .ani(flipInY,1.2s,3s)
    }
    .six-p2 {
      .ani(scale-bl,1.4s,3.2s)
    }
  
  }

  .seven {
    opacity: 1;
    .ani(bgShowTwo,1s);
    
    .seven-box {
      .ani(flip,1s,1s);
      .text-box {
        height: 8rem  ;
        transition: all 2s 2.6s;

        p {
          opacity: 1;
          transition: all 1s 2.6s;
        }
      }
    }

    .seven-p1 {
      .ani(blurred-bottom,1.5s,1.2s)
    }
    .seven-p2 {
      .ani(blurred-left,1.5s,1.2s)
    }

   
  }
}


@-webkit-keyframes roll-bottom2 {
  0% {
    -webkit-transform: translateY(800px) rotate(540deg);
    transform: translateY(800px) rotate(540deg);
    opacity: 0;
  }
  1%  {
    opacity: 1;
  }

  99% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translateY(0) rotate(0deg);
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }
}
@keyframes roll-top2 {
  0% {
    -webkit-transform: translateY(-800px) rotate(-540deg);
    transform: translateY(-800px) rotate(-540deg);
    opacity: 0;
  }
  1%  {
    opacity: 1;
  }

  99% {
    opacity:1;
  }
  100% {
    -webkit-transform: translateY(0) rotate(0deg);
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }
}
@-webkit-keyframes rs-r2 {
  0% {
    -webkit-transform: translateZ(-200px) rotate(45deg) scale(0.8);
    transform: translateZ(-200px) rotate(45deg) scale(0.8);
    opacity: 0;
  }
  1%  {
    opacity: 1;
  }

  99% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translateZ(0) rotate(0) scale(1);
    transform: translateZ(0) rotate(0) scale(1);
    opacity: 0;
  }
}


.one {
  position: relative;
  opacity: 0;
  background: #fff ;
  background-size: 100% 100%;
  overflow: hidden;
  background: #830000;

  .one-up {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0.6rem;
    left: 0;
    right: 0;
    margin: auto;
    opacity: 0.7;

    img {
      width: 0.7rem;
    }
    p {
      font-size: 0.4rem;
      font-weight: bold;
      margin-top: 0.3rem;
    }
  }

  .one-icon {
    width: 4.5rem;
    position: absolute;
    top: 0rem;
    left: 0rem;
    img {
      width: 100%;
    }
  }
  .one-icon2 {
    width: 4.7rem;
    position: absolute;
    bottom: -0.5rem;
    left: -0.3rem;

    img {
      width: 100%;
    }
  }

  .one-bg {
   width: 100%;
   height: 100%;
  }
  .bg-white {
    width: 100%;
    height: 100%;
    // background-image:linear-gradient(#258579,#027876);
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
  }

  h3 {
    color: #fff;
    font-weight: bold;
    font-size: 3rem;
    font-family: "Georgia"; 
    text-align: center;
    width: 3rem;
    height: 4rem;
  }

  h2 {
    color: #fff;
    font-weight: bold;
    font-size: 3rem;
    font-family: "Georgia"; 
    text-align: center;
    .por();
    width: 3rem;
    height: 4rem;
  }
  .por {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
  .go {
    display: flex;
    justify-content: center;
    .por();
    height: 4rem;

    h2 {
      width: 3rem;
    }
  }

  .all,.me,.to {
    height: 8rem;
  }
  .baby {
    height: 12rem;
  }

  .peo-box{
    width: 60%;
    position: absolute;
    bottom: 0rem;
    right: 0;
    left: 0;
    margin: auto;
    height: 12rem;
    .p1 {
      width: 108%;
      position: absolute;
      right: -1rem;
      bottom: 3rem;
    }

    .p2 {
      width: 101%;
      position: absolute;
      left: -1rem;
      bottom: 2rem;
      transform: rotate(5deg);
    }

    .flower1{
      width: 2.3rem;
      position: absolute;
      left: -1rem;
      bottom: 4rem;
      img {
        width: 100%;
      }
    }

    .flower2 {
      width: 1.8rem;
      position: absolute;
      left: 1rem;
      top: 0; 
      img {
        width: 100%;
      }
    }
  }
  .one-fb {
    position: absolute;
    right: 0rem;
    bottom: 0rem;
    width: 5.7rem;
    img {
      width: 100%;
    }
   }
   .one-ft {
    width: 6.5rem;
    position: absolute;
    right: 0.1rem;
    top: 0rem;
    img {
      width: 100%;
    }
   }
}

p {
  font-size: 30rem/@base;
  line-height: 62rem/@base;
  letter-spacing: 0rem/@base;
  color: #fff;
}

.two,
.three,
.four,
.six {
  .box();
}

.two {
  background: url('../images/two.png') no-repeat ;
  background-size: 100% 100%;
  position: relative;
  .two-tl {
    position: absolute;
    top: 3rem;
    left: -1rem;
    width: 8rem;
    img {
      width: 100%;
    }
  }
  .two-tr {
    position: absolute;
    top: 1rem;
    right: 0rem;
    width: 7rem;
    img {
      width: 100%;
    }
  }

  .two-bot {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }
  .two-flower {
    position: absolute;
    width: 100%;
    top: 1rem;  
    left: 0rem;
    z-index: 1;
  }
  .two-p1 {
    position: absolute;
    bottom: 8rem;
    left: 1rem;
    width: 2.8rem;  
  }
  .two-p2{
    position: absolute;
    bottom: 9rem;
    right: 0;
    width: 2.7rem;
    z-index: 1;
  }
  .two-p3 {
    position: absolute;
    bottom: 0;
    left: -0rem;
    width: 7rem;
    z-index: 1;
  }
  .two-p4{
    position: absolute;
    bottom: 0;
    right: -0.7rem;
    width: 6rem;
    z-index: 2;
  }
.icon1 {
  width: 5rem;
  position: absolute;
  top: 0;
  left: 0;
}
.icon2{
  width: 3rem;
  position: absolute;
  top: 0;
  left: 4rem;
}
.icon3 {
  width: 1rem;
  position: absolute;
  top: 0;
  right: 1rem;
}

  
}

.three {
  position: relative;
  background: url('../images/three.png') no-repeat;
  background-size: 100% 100%;
  .three-bot {
    width: 100%;
    position: absolute;
    bottom: -2rem;
    left: 0;
  }

  .three-top {
    position: absolute;
    top: 0;
    right: 0;
    width: 8rem;
  }
  .three-bg {
    position: absolute;
    top: 3rem;
    right: 0;
    width: 100%;
  }


  .three-p1 {
    position: absolute;
    bottom: 0;
    right: -1rem;
    width: 8rem;
    z-index: 3;
  }
  .three-p2 {
    position: absolute;
    bottom: 0;
    left: 0rem;
    width: 5rem;
    z-index: 2;
  }
  .three-p4 {
    position: absolute;
    top: 2rem;
    right: -0.4rem;
    width: 6rem;
    z-index: 2;
    .p4 {
      width: 100%;
    }
    .three-pt {
      position: absolute;
      top: -1.5rem;
      left: 1.5rem;
      width: 2.3rem;
    }
  }

  .three-p3 {
    position: absolute;
    top: 0;
    left: 1rem;
    width: 7rem;
    img {
      width: 100%;
    }

    .peo-bottom {
      margin-top: -0.3rem;
    }
  }

  .three-icon2 {
    position: absolute;
    bottom: 4.7rem;
    left: 2.3rem;
    width: 3rem;
    z-index: 1;
  }

}

.four {
  position: relative;
  .bg1,.bg3,.bg2 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .bg3 {
    z-index: 2;
  }

  .icon1 {
    width: 5rem;
    z-index: 1;
    position: absolute;
    top: -0.5rem;
    left: 0rem;
    img {
      width: 100%;
    }
  }
  .icon2 {
    width: 2rem;
    z-index: 1;
    position: absolute;
    top: 2.5rem;
    right: 1rem;
  }

  .icon4 {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 4rem;
    z-index: 2;
  }
  .icon3 {
    position: absolute;
    left: 6rem;
    bottom: 4rem;
    width: 2rem;
    z-index: 4;
    img {
      width: 100%;
    }
  }
  .icon5 {
    position: absolute;
    right: 3.8rem;
    bottom: 11rem;
    width: 2rem;
    z-index: 2;
    img {
      width: 100%;
    }
  }
  .p1 {
    position: absolute;
    left: 2.5rem;
    top: 1rem;
    width: 6rem;
    z-index: 1;
    .peo-1 {
      width: 100%;
    }
    .four6 {
      width: 100%;
      margin-top: -1rem;
    }
  }
  .p2 {
    position: absolute;
    right: 0.3rem;
    bottom: 0rem;
    width: 7.7rem;
    z-index: 1;
  }
  .p3 {
    position: absolute;
    left: -0.8rem;
    bottom: 1.3rem;
    width: 6.5rem;
    z-index: 1;
  }
  .p4 {
    position: absolute;
    right: -0.4rem;
    bottom: 0rem;
    width: 3.4rem;
    z-index: 2;
  }


  .love {
    position: absolute;
    left: 1.2rem;
    top: 5rem;
    width: 3.4rem;
    z-index: 2;
    img {
      width: 100%;
    }
  }

}

.six {
  position: relative; 
  background: url('../images/six-bg.png') no-repeat;
  background-size: 100% 100%;
  .six-r {
    position: absolute;
    right: 6.2rem;
    top: 8rem;
    width: 5.4rem;
  }
  .six-l {
    position: absolute;
    left: 6rem;
    top: 2rem;
    width: 9.4rem;
  }
  .six-cen {
    position: absolute;
    left: 0;
    bottom: 0;
    top: 0;
    right: 0;
    margin: auto;
    width: 9.4rem;
  }
  .six-icon {
    position: absolute;
    left: 0rem;
    bottom: -8rem;
    width: 11.4rem;
  }
  .six-p1 {
    position: absolute;
    left: -1rem;
    bottom: 0rem;
    width: 6.4rem;
    
  }
  .six-p2 {
    position: absolute;
    left: 4rem;
    bottom: 4rem;
    width: 4.4rem;
  }
  .six-p3 {
    position: absolute;
    left: 0rem;
    bottom: 6rem;
    width: 5.4rem;
  }
  .six-p4 {
    position: absolute;
    right: -1rem;
    bottom: 0rem;
    width: 5.4rem;
    z-index: 1;

    .sp4 {
      width: 100%;
    }
    .king {
      width: 5rem;
      position: absolute;
      top: -2.4rem;
      right: 0.2rem;
    }
  }
  .six-p5 {
    position: absolute;
    right: -1rem;
    bottom: 7rem;
    width: 4.5rem;
  }
}

.seven {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('../images/seven-bg.png') no-repeat;
  background-size: 100% 100%;
  .seven-box {
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    img {
      width: 100%;
    }
    .text-box {
      width: 80%;
      height: 0.5rem;
      background: #fff;
      margin-bottom: -0.7rem;
      z-index: 1;
      border-radius: 10px 10px 0 0;
      overflow: hidden;
      padding: 0.5rem;
      box-sizing: border-box;
      p {
        color: #000;
        // text-align: center;
        text-indent: 2em;
        font-family: 'kaiti';
        font-size: 0.5rem;
        line-height: 0.7rem;
        opacity: 0;
      }
    }
  }

  .seven-p1 {
    position: absolute;
    right: -0.3rem;
    bottom: 0rem;
    width: 3.5rem;
  }
  .seven-p2 {
    position: absolute;
    left: -0.3rem;
    bottom: 0rem;
    width: 4.8rem;
  }


}